import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import action from '../../store/actions/home'
import { Link } from 'react-router-dom'
function Home(props) {
  useEffect(() => {
    props.getBannerList()
    props.getRecommendList({ limitNum: 4 })
  }, [])
  return (
    <div className="box">
      <header className="header">Home 头部</header>
      <div className="content">
        {
          props.bannerList && props.bannerList.map(item => (
            <img src={ item.img } alt="" key = { item.bannerid }/>
          ))
        }
        <h4>params</h4>
        {
          props.recommendList && props.recommendList.map(item => (
            <div key={item.proid}>
              <Link to={ '/detail/' + item.proid }>{ item.proname }</Link>
            </div>
          ))
        }
        <hr />
        <h4>query</h4>
        {
          props.recommendList && props.recommendList.map(item => (
            <div key={item.proid}>
              <Link to={ '/test?proid=' + item.proid }>{ item.proname }</Link>
            </div>
          ))
        }
      </div>
    </div>
  )
}
// ({ home: { bannerList, recommendList }}) => {
//   return {
//     bannerList,
//     recommendList
//   }
// }
export default connect((state) => {
  return {
    bannerList: state.home.bannerList,
    recommendList: state.home.recommendList
  }
}, (dispatch) => {
  return {
    getBannerList () {
      dispatch(action.getBannerListAction())
    },
    getRecommendList (params) {
      dispatch(action.getRecommendListAction(params))
    }
  }
})(Home)
